<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <el-form size="mini" :inline="true" :model="searchModel">
                <el-form-item label="商户编号（必传）">
                  <el-input size="mini" v-model="searchModel.userId" placeholder="商户编号（必传）"></el-input>
                </el-form-item>

                <el-form-item label="转账状态:">
                  <el-radio-group @change="search(1)" v-model="searchModel.status">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="IMPORTED">已导入</el-radio-button>
                    <el-radio-button label="WAIT_PAY">待付款</el-radio-button>
                    <el-radio-button label="DEALING">处理中</el-radio-button>
                    <el-radio-button label="SUCCESS">成功</el-radio-button>
                    <el-radio-button label="FAIL">失败</el-radio-button>
                    <el-radio-button label="DISUSE">废弃</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="订单编号:">
                  <el-input size="mini" v-model="searchModel.importBizNo" placeholder="订单编号"></el-input>
                </el-form-item>

                <el-form-item label="收款账号:">
                  <el-input size="mini" v-model="searchModel.identity" placeholder="收款账号"></el-input>
                </el-form-item>

                <el-form-item label="外部批次号:">
                  <el-input size="mini" v-model="searchModel.importBatchNo" placeholder="外部批次号"></el-input>
                </el-form-item>

                <el-form-item label="打款备注:">
                  <el-input size="mini" v-model="searchModel.remark" placeholder="备注"></el-input>
                </el-form-item>

                <el-form-item label="创建时间:">
                  <el-date-picker v-model="searchModel.createTime" type="datetimerange" :picker-options="pickerOptions"
                    value-format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    size="mini" align="right">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="完成时间:">
                  <el-date-picker v-model="searchModel.endTime" type="datetimerange" :picker-options="pickerOptions"
                    value-format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    size="mini" align="right">
                  </el-date-picker>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="primary" @click="search(1)">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <el-card shadow="never">
          <el-table size="mini" v-loading="loading" ref="multipleTable" :data="tableData" highlight-current-row>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="130" label="订单编号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.importBizNo }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="外部批次号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.importBatchNo }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="200" prop="detailId" label="支付宝交易号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.detailId ? scope.row.detailId : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="收款账号">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.identity }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.name ? scope.row.name : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="账号类型">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.identityType === 'TAOBAO_NICKNAME'">淘宝昵称</span>
                  <span v-else>支付宝账号</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.transAmount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.status === 'IMPORTED'">已导入</span>
                  <span v-if="scope.row.status === 'WAIT_PAY'" class="text-info">待付款</span>
                  <span v-if="scope.row.status === 'DEALING'" class="text-primary">处理中</span>
                  <span v-if="scope.row.status === 'SUCCESS'" class="text-success">成功</span>
                  <span v-if="scope.row.status === 'FAIL'" class="text-danger">失败</span>
                  <span v-if="scope.row.status === 'DISUSE'" class="text-danger">已废除</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="失败原因">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.errorMsg ? scope.row.errorMsg : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.remark }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="paging-wrap">
            <el-col :span="24">
              <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]"
                :page-size="searchModel.pageSize" layout="prev, pager, next, sizes, jumper" @size-change="PageSizeChange"
                @current-change="PageChange" :total="searchModel.count">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>

      </div>
    </div>
  </div>
</template>


<script>
import { searchPayTrans } from "@/api/payTrans";
import pickerOptions from "../../utils/options";
import moment from "moment";

let defaultSearchModel = {
  pageSize: 10,
  pageNo: 1,
  count: null,
  payTransBatchId: null,
  importBizNo: null,
  identity: null,
  importBatchNo: null,
  status: "", //状态
  createTime: [
   
  ],
  userId: null,
  remark: null,
  endTime: [],
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultSearchModel),
      loading: false,
      opLoading: false,
      tableData: [],
      pickerOptions,
    };
  },

  components: {},
  methods: {
    search(pageNo) {
      if (!this.searchModel.userId) {
        this.$notify({
          title: "请输入商户编号",
          type: "error",
          duration: 2500,
        });
        return
      }
      this.loading = true;
      if (pageNo) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);
      searchPayTrans(searchModel)
        .then((res) => {
          if (res.success) {
            this.searchModel.count = res.count;
            this.tableData = res.data;
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.searchModel.count = 0;
          this.tableData = [];
        });
    },
    compileSearchModel(searchModel) {
      if (searchModel.createTime) {
        searchModel.minCreateTime = searchModel.createTime[0];
        searchModel.maxCreateTime = searchModel.createTime[1];
      }
      if (searchModel.endTime) {
        searchModel.minEndTime = searchModel.endTime[0];
        searchModel.maxEndTime = searchModel.endTime[1];
      }
      delete searchModel.createTime;
      delete searchModel.endTime;
      searchModel.pageNo = searchModel.pageNo - 1;
    },

    /**
     * 页数改变
     * @param data 改变后的页数
     * @constructor
     */
    PageChange(data) {
      this.searchModel.pageNo = data;
      this.search();
    },
    /**
     * 单页条数改变
     * @param data 改变后的条数
     * @constructor
     */
    PageSizeChange(data) {
      this.searchModel.pageSize = data;
      this.search();
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultSearchModel);
      this.search();
    },
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
.substationGroup {
  margin-bottom: 16px;

  .substationItem {
    margin-right: 20px;
  }
}
</style>
